<template>
  <div class="page-header">
    <h1>教学任务管理</h1>
    <div class="actions">
      <el-button type="primary" @click="handleNewMission">
        <el-icon><Plus /></el-icon> 新增教学任务
      </el-button>
      <el-button type="info" @click="handleDownloadTemplate">
        <el-icon><Download /></el-icon> 下载导入模板
      </el-button>
      <el-button type="success" @click="handleImportClick">
        <el-icon><Upload /></el-icon> 批量导入
      </el-button>
    </div>
  </div>
</template>

<script>
import { Plus, Upload, Download } from '@element-plus/icons-vue'

export default {
  name: 'TeachingMissionPageHeader',
  components: {
    Plus, Upload, Download
  },
  emits: ['new-mission', 'download-template', 'import-click'],
  methods: {
    handleNewMission() {
      this.$emit('new-mission')
    },
    handleDownloadTemplate() {
      this.$emit('download-template')
    },
    handleImportClick() {
      this.$emit('import-click')
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
}

.actions {
  display: flex;
  gap: 10px;
}
</style>
